import React, { useEffect } from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

function Content1(props) {
  const { ...tagProps } = props;
  const { dataSource, isMobile } = tagProps;
  delete tagProps.dataSource;
  delete tagProps.isMobile;
  const animType = {
    queue: isMobile ? 'bottom' : 'right',
    one: isMobile
      ? {
        scaleY: '+=0.3',
        opacity: 0,
        type: 'from',
        ease: 'easeOutQuad',
      }
      : {
        delay:500,
        x: '-=30',
        opacity: 0,
        type: 'from',
        ease: 'easeOutQuad',
      },
  };
  useEffect(()=>{
    let fn = ()=>{
      let imgHeight = document.querySelector('.content1-img')?.clientHeight
       document.querySelector('.content1-text')?.setAttribute('style',`height:${imgHeight}px`)
     }
     fn()
    window.addEventListener('resize',fn)
    return ()=>{
      window.removeEventListener('resize',fn)
    }
  },[])
  return (
    <div {...tagProps} className='home-page-wrapper content1-wrapper'>
      <OverPack  className= 'home-page content1' playScale={0.3}  component={Row}>
        <QueueAnim
          key="text"
          type="alpha"
          leaveReverse
          ease={['easeOutQuad', 'easeInQuad']}
          className= 'content1-text'
          md={12}
          xs={24} 
          component={Col}
          componentProps={{
            md: 12,
            xs: 24,
          }}
        >
          <h2 key="h1" {...dataSource.title}>
            <div className='tag'>{ dataSource.title.children}</div>
            <span className='engTag'>GROUP PROFILE</span>
          </h2>
          <div key="p" {...dataSource.content}>
          <div key="bttton" className='button hvr-ripple-out'>{"更多 ->>"}</div>

            {dataSource.content.children}
          </div>
        </QueueAnim>
        <TweenOne
          key="img"
          animation={
            {
              x: '+=50',
            opacity: 0,
            type: 'from',
            ease: 'easeOutQuad',
            }
          }
          resetStyle
          className= 'content1-img'
          md= {12}
           xs= {24} 
          component={Col}
          componentProps={{
            md: 12,
            xs: 24,
          }}
        >
         <img src={dataSource.img.children} width="100%" alt="img" />
        </TweenOne>



        <TweenOne
          delay={1200}
          key="img2"
          animation={animType.one}
          resetStyle
          className= 'content1-img'
          md= {12}
           xs= {24} 
          component={Col}
          componentProps={{
            md: 12,
            xs: 24,
          }}
        >
          <span {...dataSource.img2}>
            <img src={dataSource.img2.children} width="100%" alt="img" />
          </span>
        </TweenOne>
        <QueueAnim
          delay={1200}
          key="text2"
          type={'right'}
          leaveReverse
          ease={['easeOutQuad', 'easeInQuad']}
          className= 'content2-text'
          md={12}
          xs={24} 
          component={Col}
          componentProps={{
            md: 12,
            xs: 24,
          }}

        >
          <h2 key="h1" {...dataSource.title2}>
            <div className='tag'>{dataSource.title2.children}</div>
            <span className='engTag'>VIDEO</span>
          </h2>
          <div key="p" {...dataSource.content2}>
          <div key="button2" style={{width:"65%",overflow:"hidden",position:"absolute",cursor:"pointer",marginRight:"2%"}}>
          <img src={dataSource.content2.children} width="100%" alt="img" />
          </div>
            <div className='desc'>{dataSource.content2.desc}</div>
          </div>
        </QueueAnim>
        
      </OverPack>
    </div>
  );
}

export default Content1;
